<template>
  <div>
    <el-row>
      <el-col :span="12">
        <el-menu
          class="sidebar-el-menu"
          background-color="#324157"
          text-color="#bfcbd9"
          active-text-color="#20a0ff"
          router
        >
          <template v-for="item in leftNav">
            <template v-if="item.son">
              <el-submenu
                :index="item.url"
                :key="item.url"
              >
                <template slot="title">
                  <i :class="item.icon"></i>
                  <span slot="title">{{ item.permissions_name }}</span>
                </template>
                <template v-for="subItem in item.son">
                  <el-submenu
                    v-if="subItem.son"
                    :index="subItem.url"
                    :key="subItem.url"
                  >
                    <template slot="title"><i :class="subItem.icon"></i>{{ subItem.permissions_name }}</template>
                    <el-menu-item
                      v-for="(threeItem, i) in subItem.son"
                      :key="i"
                      :index="threeItem.url"
                    ><i :class="threeItem.icon"></i>{{ threeItem.permissions_name }}</el-menu-item>
                  </el-submenu>
                  <el-menu-item
                    v-else
                    :index="subItem.url"
                    :key="subItem.url"
                  ><i :class="subItem.icon"></i>{{ subItem.permissions_name }}</el-menu-item>
                </template>
              </el-submenu>
            </template>
            <template v-else>
              <el-menu-item
                :index="item.url"
                :key="item.url"
              >
                <i :class="item.icon"></i>
                <span slot="title">{{ item.permissions_name }}</span>
              </el-menu-item>
            </template>
          </template>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'ElementTestSlider',

  data() {
    return {
      leftNav:[],
    };
  },
  created() {
    axios.get('./static/nav.json')
      .then( (response) =>{
        this.leftNav = response.data.data
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
      .finally(function () {
        // always executed
      });
  },
  mounted() {

  },
};
</script>
